"use client"

import { useMovie } from "@/app/utils/hooks/useMovies";
import { useParams, useRouter } from "next/navigation";
import { AiOutlineArrowLeft } from "react-icons/ai";

export default function WatchPage() {
    const { movieId } = useParams()
    const router = useRouter()
    const { data } = useMovie(movieId as unknown as number)

    if (!movieId) return (<>你访问的内容走丢了{movieId}</>)

    return (
        <div className="h-screen w-screen bg-black">

            <nav className="fixed w-full p-4 z-10 flex flex-row items-center gap-8 bg-black bg-opacity-70">
                <AiOutlineArrowLeft size={30} onClick={() => router.replace("/")} className="text-white cursor-pointer" />
                <p className="text-white text-1xl md:text-3xl font-bold">
                    <span className="font-light mr-4"> Watching</span>
                    {data?.title}
                </p>
            </nav>
            <video poster={data?.thumbnailUrl} controls className="h-full w-full" src={data?.videoUrl} />
        </div>
    );
}

